<template>
    <div>
        <div class="cmformItem">
            <div class="slbox">
                <el-select v-model="quhao" placeholder=" " >
                    <el-option value="+86" label="+86" />
                </el-select>
            </div>
            <div class="fgl"></div>
            <div class="inputBox">
                <input type="text" v-model="fmdata.phone" placeholder="请输入手机号码"/>
            </div>
        </div>
        <div class="cmformItem">
            <div class="inputBox">
                <input type="text" v-model="fmdata.smsCode" placeholder="请输入验证码"/>
            </div>
            <div class="fgl"></div>
            <div v-if="showTime" class="gtbtn gtbtn2">{{num}}s</div>
            <div v-else class="gtbtn" @click="getCode">获取验证码</div>
            
        </div>
        <div class="forgetBnt" @click="goNext">下一步</div>
    </div>
</template>

<script setup>
import {ref,onUnmounted} from 'vue'
import { verifySmsCode,sendSmsCode } from '@/api/system'
import { message } from '@/utils/element'

const emit = defineEmits(['next'])

const fmdata = ref({})
const showTime = ref(false)
const num = ref(60)
const stm = ref(null)
const quhao = ref('+86')

const checkMobile =phone =>{
    var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (!myreg.test(phone)) {
        return false;
    } else {
        return true;
    }
}

const countdown = ()=>{
    stm.value = setTimeout(()=>{
        if(num.value>1){
            num.value-- 
            countdown()
        }else{
            showTime.value = false
            stm.value && clearTimeout(stm.value) 
        } 
    },1000)
}

const getCode = async ()=>{
    if(!checkMobile(fmdata.value.phone)){
        return message('手机号输入有误',3)
    }
    const res = await sendSmsCode({
        bizTypeName:'FINDPASSWORD',
        userType:1, 
        phone:fmdata.value.phone
    })
    if(!res.success){
        return message(res.message || '数据错误',3)
    }
    showTime.value = true
    countdown()
}

const goNext = async ()=>{
    if(!fmdata.value.phone){
        return message('请输入手机号',3)
    }else if(!fmdata.value.smsCode){
        return message('请输入短信验证码',3)
    }
    const res = await verifySmsCode({
        bizTypeName:'FINDPASSWORD',
        ...fmdata.value
    })
    if(!res.success){
        return message(res.message || '数据错误',3)
    }
    emit('next',fmdata.value.phone)
}

onUnmounted(()=>{
    console.log("------onUnmounted---------")
    stm.value && clearTimeout(stm.value) 
})
</script>